<template>
    <div id="max">
        <div>设置/角色管理/编辑角色</div>
        <div id="mid">
            <div id="shang">
                <p>角色名称</p>
                <div id="shuru">
                    <div class="demo-input-size">
                        <el-input v-model="input1" disabled class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                </div>
            </div>
            <div id="xia">
                <p>管理后台权限配置</p>
                <div id="chekbox">
                    <div id="chekbox-1">
                        <div>
                            <el-checkbox v-model="checked1" label="总览" size="large" />
                        </div>
                        <div>
                            <el-checkbox v-model="checkAll1" :indeterminate="isIndeterminate1"
                                @change="handleCheckAllChange1">流调管理</el-checkbox>
                            <el-checkbox-group v-model="checkedliudiaoguali" @change="handleCheckedCitiesChange1">
                                <el-checkbox v-for="liudiao in liudiaoguali" :key="liudiao" :label="liudiao">{{
                                    liudiao
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div>
                            <el-checkbox v-model="checked2" label="指挥调度" size="large" />
                        </div>
                        <div>
                            <el-checkbox v-model="checked3" label="异常预警" size="large" />
                        </div>
                        <div>
                            <el-checkbox v-model="checkAll2" :indeterminate="isIndeterminate2"
                                @change="handleCheckAllChange2">居家监测</el-checkbox>
                            <el-checkbox-group v-model="checkedjujiajiace" @change="handleCheckedCitiesChange2">
                                <el-checkbox v-for="jujia in jujiajiace" :key="jujia" :label="jujia">{{
                                    jujia
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div>
                            <el-checkbox v-model="checked4" label="通知公告" size="large" />
                        </div>
                        <div>
                            <el-checkbox v-model="checkAll4" :indeterminate="isIndeterminate4"
                                @change="handleCheckAllChange4">统计分析</el-checkbox>
                            <el-checkbox-group v-model="checkedtongji" @change="handleCheckedCitiesChange4">
                                <el-checkbox v-for="city in tongji" :key="city" :label="city">{{
                                    city
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div id="chekbox-2">
                        <el-checkbox v-model="checkAll3" :indeterminate="isIndeterminate3"
                            @change="handleCheckAllChange3">设置</el-checkbox>
                        <el-checkbox-group v-model="checkedSetting" @change="handleCheckedSetChange3">
                            <el-checkbox v-for="city in Setting" :key="city" :label="city">{{
                                city
                            }}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
        </div>
        <div id="small">
            <router-link to="/jueseguanli">
                <el-button size="large">取消</el-button>
            </router-link>
            <el-button type="primary" size="large" @click="edit()">保存</el-button>
        </div>

    </div>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent, ref } from 'vue'
import {useRoute} from 'vue-router';

export default defineComponent({
    name: "jueseadd",
    setup() {
        const router= useRoute();
        const data=eval("("+router.query.key+")")//接参

        const input1 = ref(data.roleName);//角色名称
        const checked1 = ref(false)//
        const checked2 = ref(false)//
        const checked3 = ref(false)//
        const checked4 = ref(false)//


        const checkAll1 = ref(false)
        const isIndeterminate1 = ref(true)
        const checkedliudiaoguali = ref(['确诊病例管理'])
        const liudiaoguali = ['确诊病例管理', '密接人员管理']
        const handleCheckAllChange1 = (val: boolean) => {
            checkedliudiaoguali.value = val ? liudiaoguali : []
            isIndeterminate1.value = false
        }
        const handleCheckedCitiesChange1 = (value: string[]) => {
            const checkedCount = value.length
            checkAll1.value = checkedCount === liudiaoguali.length
            isIndeterminate1.value = checkedCount > 0 && checkedCount < liudiaoguali.length
        };

        const checkAll2 = ref(false)
        const isIndeterminate2 = ref(true)
        const checkedjujiajiace = ref(['每日待办', '每日新增'])
        const jujiajiace = ['每日待办', '每日新增', '每日异常', '居家监测']
        const handleCheckAllChange2 = (val: boolean) => {
            checkedjujiajiace.value = val ? jujiajiace : []
            isIndeterminate2.value = false
        }
        const handleCheckedCitiesChange2 = (value: string[]) => {
            const checkedCount = value.length
            checkAll2.value = checkedCount === jujiajiace.length
            isIndeterminate2.value = checkedCount > 0 && checkedCount < jujiajiace.length
        }

        const checkAll3 = ref(false)
        const isIndeterminate3 = ref(true)
        const checkedSetting = ref(['组织管理', '账号管理'])
        const Setting = ['组织管理', '账号管理', '角色管理', '系统日志', '转运方式设置', '接触方式设置', '时效设置']
        const handleCheckAllChange3 = (val: boolean) => {
            checkedSetting.value = val ? Setting : []
            isIndeterminate3.value = false
        }
        const handleCheckedSetChange3 = (value: string[]) => {
            const checkedCount = value.length
            checkAll3.value = checkedCount === Set.length
            isIndeterminate3.value = checkedCount > 0 && checkedCount < Set.length
        }

        const checkAll4 = ref(false)
        const isIndeterminate4 = ref(true)
        const checkedtongji = ref(['信息登记统计表', '密接人群分析表'])
        const tongji = ['信息登记统计表', '密接人群分析表', '异常预警统计表']

        const handleCheckAllChange4 = (val: boolean) => {
            checkedtongji.value = val ? tongji : []
            isIndeterminate4.value = false
        }
        const handleCheckedCitiesChange4 = (value: string[]) => {
            const checkedCount = value.length
            checkAll4.value = checkedCount === tongji.length
            isIndeterminate4.value = checkedCount > 0 && checkedCount < tongji.length
        }
        const role=localStorage.role.value
        function edit(){
            axios({
                method:'post',
                url:'/role/editRole',
                data:{
                    roleName:data.roleName,
                    roleId:data.roleId,
                    permissionIds:'',
                    userNumber:data.userNumber,
                    creator:localStorage.role,
                    creatTime:'2023-03-01',
                }

            }).then((res)=>{
                console.log(res);
                
                console.log('成功');
                
            })
        }


        return {
            input1,
            checked1,
            checked2,
            checked3,
            checked4,

            checkAll1,
            isIndeterminate1,
            checkedliudiaoguali,
            liudiaoguali,
            handleCheckAllChange1,
            handleCheckedCitiesChange1,

            checkAll2,
            isIndeterminate2,
            checkedjujiajiace,
            jujiajiace,
            handleCheckAllChange2,
            handleCheckedCitiesChange2,

            checkAll3,
            isIndeterminate3,
            checkedSetting,
            Setting,
            handleCheckAllChange3,
            handleCheckedSetChange3,

            checkAll4,
            isIndeterminate4,
            checkedtongji,
            tongji,
            handleCheckAllChange4,
            handleCheckedCitiesChange4,
            edit,
            role

        }
    }

})

</script>
<style scoped>
#max {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #333;
}

#mid {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    background-color: white;
}

#shang {
    display: flex;
    flex-direction: column;
}

#shuru {
    margin: 15px 0;
    width: 340px;
    height: 40px;
}

#xia {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

#chekbox {
    display: flex;
    flex-direction: row;

}

#chekbox-1 {
    display: flex;
    flex-direction: column;

}

#chekbox-2 {
    display: flex;
    flex-direction: column;
    margin-left: 60px;
}

#small {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 50px 0;
}
</style>